<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		.menu{
			width: 100%;
			height: 40px;
			background: #01204F url() 0 0 no-repeat;
			margin-top: 100px;
		}
		.mid{
			width: 1000px;
			height: 40px;
			margin:0 auto;
			position: relative;
		}
		.list{
			width: 1000px;
			height: 40px;
			margin:0 auto;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.item{
			float: left;
			color: #ffff;
			line-height: 40px;
			font-weight: 600;
			padding: 0 10px;
			cursor: pointer;
		}
		.first{
			background: #CC0000 url() 0 0 no-repeat;
		}

		.run{
			width: 10px;
			background: #CC0000 url() 0 0 no-repeat;
			height: 40px;
			position: absolute;
			top: 0px;
			left:0px;
		}

	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script>
		$(function(){

			$('.item').hover(function() {

				width = $(this).width()+20;

				left = $(this).position().left;

				$('.run').stop().animate({'left': left+"px",'width':width+"px"}, 200);
				
			}, function() {
				$('.run').stop().animate({'left': 0+"px",'width':"10px"}, 500);
			});

		})
	</script>
</head>
<body>
	<div class="menu">
		<div class="mid">
			<div class="run"></div>
			<ul class="list">
				<li class="item first">首页</li>
				<li class="item">国内</li>
				<li class="item">国际</li>
				<li class="item">军事</li>
				<li class="item">财经</li>
				<li class="item">娱乐</li>
				<li class="item">体育</li>
				<li class="item">互联网</li>
				<li class="item">科技</li>
				<li class="item">游戏</li>
				<li class="item">女人</li>
				<li class="item">汽车</li>
				<li class="item">房产</li>
				<li class="item">个性推荐</li>
			</ul>
			
		</div>
	</div>
</body>
</html>